<template>
  <div class="content-item" v-loading.fullscreen.lock="fullscreenLoading">
    <div class="container-item">
      <div class="column-item">
        <div class="row-wrap">
          <div class="title-item">
            <span class="real_time_txt">今日考勤统计</span>
          </div>
          <div class="chart-data">
            <CensusChart ref="CensusChartRef" />
          </div>
        </div>
        <div class="row-wrap item-wrap">
          <span class="real_time_txt">在场人数统计</span>
          <div class="chart-data">
            <TodayCensus ref="TodayCensusRef" />
          </div>
        </div>
<!--        <div class="row-wrap">-->
<!--          <span class="real_time_txt">本周在场人数统计</span>-->
<!--          <div class="chart-data">-->
<!--            <WeekCensus ref="WeekCensusRef" />-->
<!--          </div>-->
<!--        </div>-->
      </div>

      <div class="column-item" ref="staffInfo">
        <div class="title-item">
          <span class="real_time_txt">人员实时动态</span>
        </div>

        <div class="staff-census flex">
          <div class="column-wrap flex">
            <img class="image" src="../../images/zhaichang.png" />
            <div class="flex-column">
              <label>{{ onlineNum }}</label>
              <span>现场人数</span>
            </div>
          </div>
          <div class="column-wrap flex">
            <img class="image" src="../../images/jinchang.png" />
            <div class="flex-column">
              <label>{{ intoSize }}</label>
              <span>进场人数</span>
            </div>
          </div>
          <div class="column-wrap flex">
            <img class="image" src="../../images/chuchang.png" />
            <div class="flex-column">
              <label>{{ outSize }}</label>
              <span>出场人数</span>
            </div>
          </div>
        </div>

        <div class="staff-info-wrap flex">
          <div class="image-wrap">
            <el-image class="image" :src="userInfo.recImage" fit="cover" />
          </div>
          <div class="staff-info-item">
            <div class="info-text">
              <label>姓名：</label>
              <span>{{ userInfo.realname }}</span>
            </div>
            <div class="info-text">
              <label>班组：</label>
              <span>{{ userInfo.name }}</span>
            </div>
            <div class="info-text">
              <label>进场时间：</label>
              <span>{{ userInfo.registerdate }}</span>
            </div>
            <div class="info-text">
              <label>出场时间：</label>
              <span></span>
            </div>
          </div>
        </div>

        <el-table
          ref="realTimeRecordTable"
          :data="realTimeList"
          :height="tableHeight"
          size="small"
          style="width: 100%;"
          highlight-current-row
          @current-change="handleCurrentChange">
          <el-table-column prop="realname" label="姓名"></el-table-column>
          <el-table-column prop="username" label="ID"></el-table-column>
          <el-table-column prop="registerdate" label="出入时间" width="170"></el-table-column>
          <el-table-column prop="inoutType" label="出入口">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.inouttype == 1" size="mini">入口</el-tag>
              <el-tag v-if="scope.row.inouttype == 2" type="danger" size="mini">出口</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="所属班组"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import HttpInterface from "../../../util/httpInterface";
import Constants from "../../../util/constants";
import CensusChart from "./module/CensusChart";
import TodayCensus from "./module/TodayCensus";
import WeekCensus from "./module/WeekCensus";
import PublicMethods from "../../../util/PublicMethods";
import HttpConfig from "../../../util/httpConfig";

export default {
  name: "StaffStatistics",
  components: {
    CensusChart, TodayCensus, WeekCensus
  },
  data() {
    return {
      tableHeight: 300,
      realTimeList: [],
      onlineNum: "",
      fullscreenLoading: false,
      intoSize: "",
      outSize: "",
      userInfo: {}
    };
  },

  created() {
    this.$nextTick(() => {
      this.getTableHeight();
    })
  },

  mounted() {
    let _this = this;
    let resizeFlag = null;
    window.onresize = () => {
      resizeFlag && clearTimeout(resizeFlag);
      resizeFlag = setTimeout(() => {
        _this.getTableHeight();
        resizeFlag = null;
      }, 300);
    };
  },

  beforeDestroy() {
    window.onresize = null;
  },

  methods: {
    getTableHeight() {
      let tableH = 300;
      let divH = document.getElementsByClassName('column-item')[1];
      this.tableHeight = divH.offsetHeight - tableH;
    },

    // 获取人员统计数据
    getStatisticsData (data) {
      var _this = this;
      let params = {
        dayTime: data.time,
        bidSection: data.bidSection,
        areaId: data.areaId
      };
      HttpInterface.requestGet(this, HttpInterface.URL_DUTYCOUNT_INDEX, params, function (res) {
        let { code, data } = res.data;
        let { onlineNum, intoSize, outSize } = data;
        _this.onlineNum = onlineNum;
        _this.intoSize = intoSize;
        _this.outSize = outSize;
        _this.$store.commit('changeStaffInfo', data);
        _this.$refs.TodayCensusRef.renderTodayCensus();  // 今日在场人数统计
        // _this.$refs.WeekCensusRef.renderChart();   // 本周在场人数统计
      }, function () {
        _this.errorMessage("数据获取失败！");
      })
    },

    // 获取出入记录数据
    getInAndOutList(data) {
      let _this = this;
      let { bidSection, areaId, time } = data;
      let params = { pageNum: 1, pageSize: 2000 };

      if (bidSection) params.bidSection = bidSection;
      if (areaId) params.areaId = areaId;
      if (time) {
        params.starttime = time + " 00:00:00";
        params.endtime = time + " 23:59:59";
      }
      HttpInterface.requestGet(this, HttpInterface.URL_DUTYLOG_LIST, params, function(res) {
        let { data, total } = res.data;
        data.forEach(item => {
          item.recImage = HttpConfig.serverUrl + item.rec_image;
        })
        if (data.length == 0) _this.userInfo = {};
        _this.realTimeList = data;
        _this.$nextTick(() => {
          let row = _this.$refs.realTimeRecordTable.data[0];
          row && _this.handleCurrentChange(row);
        })
      }, null);
    },

    handleCurrentChange(row) {
      this.userInfo = row;
    }
  }
};
</script>

<style scoped lang="scss">
  .content-item{
    height: calc(100vh - 60px);
  }

  .container-item {
    display: flex;
    flex-direction: row;
    text-align: justify;
    justify-content: space-between;
    height: 100%;

    .column-item {
      width: 50%;
      height: 100%;
      box-sizing: border-box;

      &:first-child{
        border-right: 1px solid #dedede;
        padding: 20px 30px 20px 10px;
      }

      &:last-child{
        padding: 20px 10px 20px 30px;
      }

      .row-wrap{
        height: 33.3%;
        margin-bottom: 14px;
        border-bottom: 1px dotted #c4c4c4;

        &:last-child{
          margin-bottom: 0;
          border-bottom: none;
        }

        .chart-data{
          width: 100%;
          height: calc(100% - 40px);
        }
      }

      .title-item{
        display: flex;
        align-items: center;
      }

      .item-wrap{
        height: 67%;
      }

      .staff-census{
        .column-wrap{
          width: 33.3%;
          font-size: 14px;
          color: #999999;
          padding: 16px 0;
          position: relative;
          justify-content: center;
          align-items: center;

          &:after{
            content: "";
            width: 1px;
            height: 80%;
            background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
            position: absolute;
            top: 10%;
            right: 0;
          }

          &:last-child:after{
            content: "";
            opacity: 0;
          }

          .image{
            width: 42px;
            height: 42px;
            margin-right: 12px;
          }

          label{
            font-size: 20px;
            color: #333333;
          }
        }
      }

      .staff-info-wrap{
        background: #f6f6f6;
        padding: 14px 20px;
        margin-bottom: 20px;

        .image-wrap{
          width: 80px;
          height: 100px;
          background: #cccccc;
          margin-right: 40px;

          .image{
            width: 100%;
            height: 100%;
          }
        }

        .staff-info-item{
          flex: 1;
          display: flex;
          flex-wrap: wrap;
          align-items: center;

          .info-text{
            font-size: 14px;
            width: 49%;

            label{
              color: #666666;
            }
          }
        }
      }
    }
  }

  .real_time_txt {
    display: inline-block;
    font-size: 16px;
    color: #5c6570;
  }
</style>
